<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="120px">
      <el-form-item label="类型">
        <el-select v-model="form.lx" placeholder="请选择">
          <el-option
            v-for="(item, index) in options"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-button v-if="form.Id !== ''" type="success" style="margin-left:10px;" @click="handleUpdateSure">确认更新</el-button>
      </el-form-item>
      <el-form-item label="第">
        <el-select v-model="form.djl" placeholder="请选择">
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        轮核酸检测
        <!--        <el-input v-model.number="form.djl" onkeyup="this.value = this.value.replace(/[^\d]/g,'');" />-->
      </el-form-item>
      <el-form-item label="输入类型">
        <el-select v-model="form.isJwSr" placeholder="请选择">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="form.xm" />
      </el-form-item>
      <el-form-item label="性别">
        <el-radio v-model="form.xb" label="男">男</el-radio>
        <el-radio v-model="form.xb" label="女">女</el-radio>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model.number="form.nl" onkeyup="this.value = this.value.replace(/[^\d]/g,'');" />
      </el-form-item>
      <el-form-item label="身份证号">
        <el-input v-model="form.sfzh" />
      </el-form-item>
      <el-form-item label="手机号码">
        <el-input v-model="form.sjhm" onkeyup="this.value = this.value.replace(/[^\d]/g,'');" />
      </el-form-item>
      <el-form-item label="现住地址">
        <el-input v-model="form.xzz " type="textarea" />
      </el-form-item>
      <el-form-item label="行动轨迹">
        <el-table
          :data="form.gj"
          style="width: 100%"
        >
          <el-table-column
            prop="sj"
            label="日期"
          />
          <el-table-column
            prop="xxxx"
            label="详细信息"
          />
          <el-table-column
            prop="Id"
            label="操作"
            width="80"
          >
            <template slot-scope="scope">
              <el-button type="danger" size="mini" @click="xdgj_del(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin: 10px;text-align: right;">
          <!--              <el-date-picker-->
          <!--                v-model="xdgj_from.date"-->
          <!--                type="date"-->
          <!--                value-format="yyyy-MM-dd HH:mm:ss"-->
          <!--                placeholder="选择日期">-->
          <!--              </el-date-picker>-->
          <!--              <el-input v-model="xdgj_from.date" class="nx-input" size="mini" />-->
          <!--            </el-col>-->
          <!--            <el-col :span="12">-->
          <!--              描述：-->
          <!--              <el-input v-model="xdgj_from.ms" class="nx-input" size="mini" />-->
          <!--            </el-col>-->
          <el-form :inline="true" :model="xdgj_from" class="demo-form-inline" style="width: 100%;">
            <el-form-item label="日期">
              <!--              <el-input v-model="xdgj_from.sj" style="width: 25rem;" />-->
              <el-date-picker
                v-model="xdgj_from.sj"
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                style="width: 15rem;"
                placeholder="选择日期"
              />
            </el-form-item>
            <el-form-item label="描述">
              <el-input v-model="xdgj_from.xxxx" style="width: 40rem;" type="textarea" :autosize="{ minRows: 4, maxRows: 6}" />
            </el-form-item>
            <el-form-item>
              <el-button type="success" size="mini" @click="xdgj_add()">添加轨迹</el-button>
            </el-form-item>
          </el-form>
        </div>

      </el-form-item>
      <el-form-item style="text-align: center;">
        <el-button style="width: 8rem;" type="primary" @click="onSubmit">确认</el-button>
        <el-button style="width: 8rem;" @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { addZz } from '@/api/user'
import { delxgbdymjzsj } from '@/api/Xgbdymjzsj'
import { gethsyxrygaqkbyid, updatehsyxrygaqk,handleUpdateSure } from '@/api/sssj'

export default {
  // eslint-disable-next-line vue/require-prop-types
  props: ['dialogVisible_from'],
  data() {
    return {
      type: 0,
      xdgj_tableData: [],
      xdgj_from: {
        Id: '',
        sj: '',
        xxxx: ''
      },
      options1: [
        {
          label: 1,
          value: 1
        },
        {
          label: 2,
          value: 2
        },
        {
          label: 3,
          value: 3
        },
        {
          label: 4,
          value: 4
        },
        {
          label: 5,
          value: 5
        },
        {
          label: 6,
          value: 6
        }
      ],
      options: [
        {
          label: '初筛阳性(待转归)',
          value: '初筛阳性(待转归)'
        },
        {
          label: '已确诊',
          value: '已确诊'
        },
        {
          label: '无症状感染',
          value: '无症状感染'
        }
      ],
      options2: [
        {
          label: '本土',
          value: 0
        },
        {
          label: '境外',
          value: 1
        }
      ],
      form: {
        Id:'',
        xm: '',
        xb: '男',
        nl: '',
        sfzh: '',
        sjhm: '',
        xzz: '',
        lx: '',
        djl: '',
        shgj: '',
        gj: [],
        isJwSr:''
      }
    }
  },
  created() {
    // eslint-disable-next-line no-constant-condition
    if (this.dialogVisible_from.Id !== null && this.dialogVisible_from.Id !== '') {
      this.form = this.dialogVisible_from
      this.gethsyxrygaqkbyid(this.form.Id)
      console.log(this.dialogVisible_from)
      console.log(this.form.isJwSr)
      this.type = 1
    }
  },
  methods: {
    gethsyxrygaqkbyid(id) {
      const data = {
        Id: id
      }
      gethsyxrygaqkbyid(data).then(res => {
        this.form = res.Data
      }).catch(reason => {
        console.log(reason)
      })
    },
    xdgj_del(index, val) {
      this.$alert('确认删除该记录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(res => {
        this.form.gj.splice(index, 1)
      }).catch(reason => {
        console.log(reason)
      })
    },
    xdgj_add() {
      this.form.gj.push(this.xdgj_from)
      this.xdgj_from = {
        Id: '',
        sj: '',
        xxxx: ''
      }
      console.log(this.form.gj)
    },
    onSubmit() {
      console.log(this.form)
      if (this.type === 0) {
        addZz(this.form).then(res => {
          if (res.IsSuccess) {
            this.$message.success('新增成功')
            this.$emit('onCancel')
          }
        })
      }
      if (this.type === 1) {
        updatehsyxrygaqk(this.form).then(res => {
          if (res.IsSuccess) {
            this.$message.success('修改成功！')
            this.$emit('onCancel')
          }
        })
      }
      // this.$message('submit!')
    },
    onCancel() {
      this.$emit('onCancel')
    },
    handleUpdateSure(){
      console.log(this.form.Id);
      handleUpdateSure({
        Id:this.form.Id,lx:this.form.lx
      }).then(res => {
          if (res.IsSuccess) {
            this.$message.success('修改成功！')
            this.$emit('onUpdateTime')
          }
        })
    }
  }
}
</script>

<style>
</style>
